<template>
    <div class="playlist_item">
        <ul class="playlist_ul" >
            <li class="item" v-for="(item , index) in playlistdata" :key="index">
                <div class="u-cover">
                        <img :src="item.coverImgUrl">
                        <a href="/home/exhibition/" class="msk" @click.prevent="a(item.id)"></a>
                    <div class="upper_div">
                        <span class="icon"></span>
                        <span class="nb"></span>
                        <a href="javascript:;"  class="icon-play" @click="play(item.id)"></a>
                    </div> 
                     <p class="dec">
                         <a href="#">
                            {{item.name}}
                         </a>
                     </p>
                     <p class="dec">
                        <span class="by">by</span>
                        <a  class="nm">{{item.creator.nickname}}</a>
                     </p>
                </div>
                 
            </li>
        </ul>
    </div>
</template>

<script>
import {getPlaylist} from "../../../network/discover"   //歌单页面请求
export default {
    props:["resPlaylist" ],
    data() {
        return {
            playlistdata:[]
        }
    },
    methods:{
        a(id){
            this.$router.push({path:'/home/playlist' ,query:{id:id}});
        },
        play(id){
            this.$store.dispatch('song_ct' , id)
        }
    },
    watch:{
        resPlaylist(value){
           this.playlistdata = value
        }
    },
    created(){
        this.playlistdata = this.resPlaylist
    }
}
</script>

<style  lang="css" scoped>
 .playlist_item{width: 100%;min-height: 300px;margin: 30px 0 0 -43px;}
 .playlist_ul{width: 105%;height: 100%;}
 .item{display: inline-block;width: 140px; height: 188px; overflow: hidden; padding: 0 0 30px 50px;}
 .item img{width: 140px;height: 140px;margin: 0;}
 .u-cover{width: 140px;height: 140px;background-color: pink;position: relative;}
 .playlist_item .msk{position: absolute;top: 0;left: 0; width: 100%; height: 100%;}

.upper_div{width: 100%;height: 27px;position: absolute;bottom: 0;left: 0;background-image: url("../../../assets//imgs/coverall.png");background-position: 0 -537px;}
.icon{float:left; display: inline-block;width: 14px;height: 11px;background-image: url("../../../assets/imgs/iconall.png");background-position: 0 -24px;margin: 9px 5px 9px 10px;}
.nb{color: #ccc;margin: 8px 0 0 0;font-size: 12px;float:left;}
.upper_div .icon-play{width: 16px;height: 17px;display: block;background-image: url("../../../assets/imgs/iconall.png");background-position:0px 0px;float: right;margin: 5px 8px 0px 0px;}
.icon-play:hover{background-position: 0px -60px;}

.dec{width: 100%;margin-top: 8px;padding: 0;margin: 0;display: block;height: 20px;}
.dec a{color: #000000;font-size: 14px; font-family: Arial, Helvetica, sans-serif;display: block;height: 100%; text-overflow:ellipsis;overflow: hidden;white-space: nowrap;word-wrap: normal;}
.dec:hover{text-decoration: underline;}
.by{font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #999;}
.dec .nm{overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; color: #666; display: inline-block; max-width: 76%; vertical-align: middle;margin-left: 3px; line-height: 20px;}

</style>